<template>
    <div ref="listRef" class="snippet-list">
        <div class="header">
            <SnippetListHeader />
        </div>
        <div ref="bodyRef" class="body">
            <PerfectScrollbar>
                <SnippetListItem
                    v-for="(i, index) in snippetStore.snippetsByFilter"
                    :id="i.id"
                    :key="i.id"
                    :data-id="i.id"
                    :index="index"
                    :folder="i.folder?.name"
                    :date="i.updatedAt"
                    :name="i.name"
                />
            </PerfectScrollbar>
        </div>
        <div ref="gutterRef" class="gutter-line" />
    </div>
</template>

<script setup lang="ts">
import { emitter, setScrollPosition } from '@/composable'
import { useAppStore } from '@/store/app'
import { useSnippetStore } from '@/store/snippets'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import interact from 'interactjs'
import { store } from '@/electron'

const snippetStore = useSnippetStore()
const appStore = useAppStore()

const listRef = ref()
const bodyRef = ref<HTMLElement>()
const gutterRef = ref()

const scrollToSnippet = (id: string) => {
    const el = document.querySelector<HTMLElement>(`[data-id='${id}']`)
    if (el?.offsetTop) setScrollPosition(bodyRef.value!, el.offsetTop)
}

onMounted(() => {
    interact(listRef.value).resizable({
        allowFrom: gutterRef.value,
        onmove: (e) => {
            const { pageX } = e
            const minWidth = appStore.sizes.sidebar + 100
            const width = Math.floor(pageX - appStore.sizes.sidebar)

            if (pageX < minWidth) return
            appStore.sizes.snippetList = width
            store.app.set('snippetListWidth', width)
        }
    })
})

watch(
    () => appStore.isInit,
    () => scrollToSnippet(snippetStore.selectedId!)
)

emitter.on('folder:click', () => {
    setScrollPosition(bodyRef.value!, 0)
})

emitter.on('scroll-to:snippet', (id: string) => {
    scrollToSnippet(id)
})

onUnmounted(() => {
    emitter.off('folder:click')
    emitter.off('scroll-to:snippet')
})
</script>

<style lang="scss" scoped>
.snippet-list {
    position: relative;
    display: grid;
    grid-template-rows: 50px 1fr 10px;
    background-color: var(--color-snippet-list);
}
.header {
    padding-top: var(--title-bar-height);
    display: flex;
    border-bottom: 1px solid var(--color-border);
}
.body {
    padding: var(--spacing-xs) 0;
    :deep(.ps) {
        height: calc(100vh - 60px);
        padding-top: 2px;
    }
}
</style>
